Adding a Selection Control

In HTML you can add drop-down list to your Web page by using a selection control. You can select only one option at a time from the drop-down list. The selection control includes <select>, <option>, and <optgroup> tags. The <select> tag creates a drop-down list to accept a user input from a list of items; whereas, the <option> tag defines an option in the drop-down list. The important attribute in the <option> tag is the value attribute, which specifies the value to be sent to a Web server. The <optgroup> tag helps to group related choices, when you have a long list of option to select from the drop-down list created using the <select> tag.

Let’s do the following steps to add a selection control:


<!DOTYPE html>
<head>
    <title>Adding a Selection Control</title>
</head>
<body>
<center>
    <h2>Example of selection Control </h2>
    <form>
        <select>
        <optgroup label=”Computers”>
        <option value=”animate”>Animation</option>
        <option value=”infotech”>Information Technology</option>
        <option value=”media”> Multimedia</option>
        </optgroup>
        <optgroup label=”Science and Nature”>
        <option value=”bio”>Biology</option>
        <option value=”chem”>Chemistry</option>
        <option value=”physics”>Physics</option>
        </optgroup>
    </form>
</center>
</body>
</html>

Save the document with the name SelectionControl.html and open on browser.

Note: In the previous section, you learned about the HTML controls. Let’s now learn about new form elements, which are introduced in HTML 5. Go through next button: